<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象-案例</title>
    <style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		li {
			list-style-type: none;
		}
		
		a {
			text-decoration: none;
			font-size: 14px;
		}
		.container{
			width:600px;
			height:500px;
			margin: 30px auto;
		}
        #box {
            width: 150px;
            height: 150px;
			line-height:150px;
			color:#fff;
			text-align: center;
            background: red;
			transition: all 0.5s;
			margin:20px auto;
			font-size:23px;
			font-weight:bold;
        }
		p{
			text-align: center;
		}
		button{
			background-color: #bdc0c4;
			box-shadow: 0 4px 20px #9d9c9c;
			border-radius: 30px;
			padding: 8px 23px !important;
			color: #fff;
			font-family:"microsoft yahei";
			cursor:pointer;
			margin-right:10px;
			outline: none;
			border:none;
		}
		button.xs{
			background-color: #f85a29;
			box-shadow: 0 4px 20px #f9764d;
		}
		.cur {
			background-color: orange;
			/* 360度旋转 */
			transform: rotate(360deg);
		}
    </style>
	<!-- 先导入Jquery库 -->
	<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
	<script type="text/javascript" src="js/DivUtils.js"></script>
</head>
<body>
	<div class="container">
		<p>
			<button class="btn" type="1">隐藏显示</button>
			<button class="btn" type="2">旋转效果</button>
			<button class="btn" type="3">随机变色</button>
		</p>
		<div id="box">文字</div>
	</div>
	<script type="text/javascript">
		window.onload = function(){
			//console.log('over...');
			//对插件DivUtils实例化传参
			var d = new DivUtils('btn','box');
			//constructor: class DivUtils {}
			//console.log(d);
		}
	</script>
</body>

</html>